<div id="overview">
	MagicGrid 是一个小巧灵活且极具魅力的JQuery表格插件。
	虽然它只提供了基础的表格功能，但良好设计模式，使得以它拥有丰富的扩展方式和极强的适应性。
	<p>基本功能与特性：</p>
	<ol>
		<li>可调整列宽，<a href="">示例</a></li>
		<li>可通过拖放交换列的顺序，<a href="">示例</a></li>
		<li>支持从远程和本地加载数据，<a href="">示例</a></li>
		<li>支持行列自定义生成（Render），<a href="">示例</a></li>
		<li>代码简洁清晰，源码不到10K，压缩后不到3K，易于修改</li>
		<li>容易学习，使用简单</li>
		<li>简洁易调的样式表定义</li>
	</ol>
	仅需少量代码，即可实现以下功能：
	<ol>
		<li>多行分组表头（目前支持两行），<a href="">示例</a></li>
		<li>本地或服务器端排序，<a href="">示例</a></li>
		<li>本地或远程分页，<a href="">示例</a></li>
		<li>自定义分页栏样式，<a href="">示例</a></li>
		<li>合计行，<a href="">示例</a></li>
		<li>行扩展，<a href="">示例</a></li>
		<li>锁定第一列，<a href="">示例</a></li>
	</ol>
</div>
<div id="options">
	<h3><a href="#">sortLocally</a></h3>
	<p>
		前台和后台数据排序. default = false.
		<ul>
			<li>true:通过JS在前台排序.</li>
			<li>false:通过传递参数到后台排序</li>
		</ul>
	</p>
	<h3><a href="#">表头高度</a></h3>
	<p>
		表格高度集合. 使用于多行表头
		<a href="">Demo</a> 
	</p>
	<h3><a href="#">cols</a></h3>
	<p>
		表格中列的集合
		<table>
			<tr>
				<th>Items</th>
				<th>描述</th>
				<th>备注</th>		
			</tr>
			<tr>
				<td>field</td>
				<td>数据对象属性</td>
				<td>可选</td>
			</tr>
			<tr>
				<td>title</td>
				<td>列标题，可以是JS或者JQUERY元素</td>
				<td>可选, <a href="">例子</a></td>
			</tr>
			<tr>
				<td>width</td>
				<td>列宽度</td>
				<td>必须设置，以px为单位</td>
			</tr>
			<tr>
				<td>header</td>
				<td>用JS或者JQUERY元素为传统标题</td>
				<td>可选, 在多行表头中不重要.<a href="">例子</a></td>
			</tr>
			<tr>
				<td>sizeable</td>
				<td>I列是否可以重置宽度</td>
				<td>可选, default = true</td>
			</tr>
			<tr>
				<td>render</td>
				<td>返回JS或者JQUERY元素显示在单元格的函数</td>
				<td>可选.<a href="">例子</a></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>
					1. r: record object<br/>
					2. tr:row element<br/>
					3. gd: grid element<br/>
				</td>
				<td>&nbsp;</td>
			</tr>
		</table>
	</p>
	<h3><a href="#">loader</a></h3>
	<p>
		<ul>
			<li>url: URL, 加载数据的地址</li>
			<li>params: 加载数据参数, eg: { pageNo: 1, pageSize: 20 }</li>
			<li>autoLoad: 自动加载数据. default = true</li>
		</ul>
	</p>
	<h3><a href="#">pagerLength</a></h3>
	<p>
		在页数显示栏里显示一共有多少页. 可选.
		如果没有选择，页面显示栏将被隐藏.
	</p>
</div>
<div id="events">
	<h3><a href="#">afterLoad(dd, [po])</a></h3>
	<p>
		此事件在Grid加载完数据时触发。<a href="">示例</a>
		<ul>
			<li>dd: 表格所需的直接数据（数组）。<a href="">示例</a></li>
			<li>po: 完整的表格数据对象（含分页信息）。 <a href="">示例</a></li>
		</ul>
	</p>
</div>
<div id="methods">
	<h3><a href="#">sort([el])</a></h3>
	<p>
		按默认的列或者指定的列排序
		<ul>
			<li>el:排序的列，可选，一般不选</li>
		</ul>
	</p>
	<h3><a href="#">adjust([vp])</a></h3>
	<p>
		调整表格的高度与宽度
		<ul>
			<li>vp: 包含表格的容器，可选</li>
		</ul>
	</p>
	<h3><a href="#">newRow(r, [k])</a></h3>
	<p>
		创建新的一行不插入表格<br/>
		返回所创建的行
		<ul>
			<li>r: 所创建行的数据</li>
			<li>k:所创建行的索引. 表格的设置中如果没有设置索引，那么k值必须传</li>
		</ul>
		Here is an <a href="<?=$LP?>mac/js/grid/index.php?code=exp">Demo</a>.
	</p>
	<h3><a href="#">addRow(r, [k])</a></h3>
	<p>
		创建新的一行并且插入表格.<br/>
		Same param with <a href="#methods.newRow">"newRow"</a> method.
	</p>
	<h3><a href="#">loadData(data, [po])</a></h3>
	<p>
		从本地内存中加载数据到表格.
		<ul>
			<li>dd: 表格数据数组.<a href="">format Demo</a></li>
			<li>po: 完整的表格数据，包括分页信息. this param will be passed to <a href="#events.afterLoad">afterLoad</a> event.<a href="">format Demo</a></li>
		</ul>
	</p>
	<h3><a href="#">load([pm])</a></h3>
	<p>
		远程加载数据到表格.
		<ul>
			<li>pm: 加载数据的IP地址. eg: { name: 'tom' }</li>
		</ul>
	</p>
	<h3><a href="#">lockCols(cs)</a></h3>
	<p>
		锁定指定的列
		<ul>
			<li>cs: 需要锁定的列名, eg: ['code','name']</li>
		</ul>
	</p>	
</div>